{% extends "base.html" %}


{% block content %}
<!--搜索栏-->
<div class="page-header" style="padding-top:70px;">
    <form class="navbar-form" method="get" action="/apissearch/">
        {% csrf_token %}
        <input type="search" name="apitestname" placeholder="名称" required>
        <button type="submit">搜索</button>
    </form>
</div>
<!--单一接口测试步骤-->
<div class="row" style="padding-top: 70px;">
    <div class="col-md-11">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>产品</th>
                <th>单一接口测试用例名称</th>
                <th>URL地址</th>
                <th>参数=值</th>
                <th>方法</th>
                <th>预期结果</th>
                <th>测试结果</th>
                <th>时间</th>
                <th>操作</th>
                <th>测试结果</th>
            </thead>
            <tbody>

            {% for apis in apises %}
            <tr>
                <td>{{ apis.id }}</td>
                <td>{{ apis.Product.productname }}</td>
                <td>{{ apis.apiname }}</td>
                <td>{{ apis.apiurl }}</td>
                <td>{{ apis.apiparamvalue }}</td>
                <td>{{ apis.apimethod }}</td>
                <td>{{ apis.apiresult }}</td>
                <td>{{ apis.apistatus }}</td>
                <td>{{ apis.created_time }}</td>
                <td>
                    <button id="{{ apis.id }}" name="test_btn" onclick="testApi({{ apis.id }})">测试</button>

                </td>
                <td>
                    <p id="result"></p>

                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<script>
    //window.onload =
     function testApi(id) {

      var sendButton = document.getElementById(id);
      var resultDiv = document.getElementById('result');
      //var csrf_token = getCookie("csrftoken");


     sendButton.addEventListener('click', function() {
        // 创建一个 XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();

        // 设置请求的方法、URL 和异步标志
        xhr.open('POST', '/api_single_test/', true);

        // 设置请求头，指定发送的数据类型
        xhr.setRequestHeader('Content-Type', 'application/json');
        //xhr.setRequestHeader('X-CSRF-TOKEN', csrf_token);

        // 监听请求状态的变化
        xhr.onreadystatechange = function() {
          if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);

            // 在前端展示后端返回的结果
            resultDiv.innerHTML = response.result;
          }
        };

           // 构建发送给后端的数据
            var data = {
              id: id,
              name: 'John'
            };

            // 将数据转为 JSON 字符串
            var jsonData = JSON.stringify(data);

            // 发送请求
            xhr.send(jsonData);
      });
    };

    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }











</script>
{% endblock %}

